<template>
    <div class=''>
        <div class="top-group">
            <el-button type="primary" icon="el-icon-plus" @click="addTask">新增任务</el-button>
        </div>

        <el-table :data="project.task_list" style="width: 100%">
            <el-table-column prop="name" label="名称" width="180"></el-table-column>
            <el-table-column prop="case.name" label="用例"></el-table-column>
            <el-table-column prop="expr" label="表达式"></el-table-column>
            <el-table-column prop="status" label="状态（1：正在运行，2：停止运行）"></el-table-column>
            <el-table-column label="操作" width="300">
                <template v-slot="scope">
                    <el-button @click="onEditTask(scope.row)" size="mini">编辑</el-button>
                    <el-button type="primary" @click="onChangeStatus(scope.row)" size="mini">
                        <template v-if="scope.row.status == 1">停止</template>
                        <template v-if="scope.row.status == 2">启动</template>
                    </el-button>
                    <el-button type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="新增任务" v-model="dialogVisible">
            <el-form ref="taskForm" :model="taskForm" label-width="80px" :rules="taskRules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="taskForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用例" prop="case_id">
                    <el-select v-model="taskForm.case_id" placeholder="请选择用例">
                        <el-option v-for="caseobj in project.case_list" :label="caseobj.name" :value="caseobj.id"
                            :key="caseobj.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="表达式" prop="expr">
                    <el-input type="textarea" v-model="taskForm.expr" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitTask">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
    
<script type='text/ecmascript-6'>
export default {
    name: 'TaskList',
    props: ['project'],
    data() {
        return {
            dialogVisible: false,
            dialogIsEditing: false,
            taskForm: {
                name: "",
                case_id: "",
                expr: ""
            },
            taskRules: {
                name: [{ required: true, trigger: "blur", message: "请输入任务名称" }],
                case_id: [{ required: true, trigger: "change", message: "请选择用例" }],
                expr: [{ required: true, trigger: "blur", message: "请填入表达式" }],
            }
        }
    },
    components: {},
    methods: {
        sent_message(msg, type) {
            ElMessage({
                message: msg,
                type: type,
            })
        },
        addTask() {
            this.dialogIsEditing = false;
            this.dialogVisible = true;
            this.taskForm = {
                name: "",
                case_id: "",
                expr: ""
            }
        },

        onEditTask(task) {
            this.taskForm.name = task.name;
            this.taskForm.case_id = task.case.id;
            this.taskForm.expr = task.expr;
            this.taskForm.id = task.id;
            this.dialogIsEditing = true;
            this.dialogVisible = true;
        },

        onSubmitTask() {
            this.$refs['taskForm'].validate(valid => {
                if (!valid) {
                    return;
                }
                const params = JSON.parse(JSON.stringify(this.taskForm))
                params.project_id = this.project.id;
                if (this.dialogIsEditing) {
                    // 走编辑网络请求
                    this.$http.editTask(params.id, params).then(res => {
                        const theTask = res.data;
                        for (let task of this.project.task_list) {
                            if (task.id == theTask.id) {
                                task.name = theTask.name;
                                task.case_id = theTask.id;
                                task.expr = theTask.expr;
                            }
                            break;
                        }
                        this.dialogVisible = false;
                        this.sent_message("任务更新成功","success")
                    })
                } else {
                    this.$http.addTask(params).then(res => {
                        const task = res.data;
                        this.project.task_list.push(task);
                        this.dialogVisible = false;
                        this.sent_message("任务创建成功","success")
                    })
                }
            })
        },
        onChangeStatus(task) {
            const target_status = task.status == 1 ? 2 : 1
            this.$http.changeTaskStatus(task.id, target_status).then(res => {
                const theTask = res.data;
                for (let task of this.project.task_list) {
                    if (task.id == theTask.id) {
                        task.status = target_status
                        break
                    }
                }
                const msg = target_status == 1 ? "任务已经启动！" : "任务已经停止！"
                this.sent_message(msg,"success")
            })
        }
    }
}
</script>
    
<style scoped lang='scss'></style>
    